<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<title>Angel car tracker</title>

<style type="text/css">
    .demoHeaders { margin-top: 2em; }

    #tabs {width: 60%;}

    #order_dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
    #order_dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
    #dest_dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
    #dest_dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}

    ul#icons {margin: 0; padding: 0;}
    ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
    ul#icons span.ui-icon {float: left; margin: 0 4px;}

</style>


<script type="text/javascript"
    src="dwr/engine.js"> </script>
<script type="text/javascript"
    src="dwr/interface/mapController.js"> </script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
   type="text/javascript"></script>
<script type="text/javascript">


    var refreshPeriod = 10000;

    var map;
    var geocoder;

    //////////////  CarPoint object for offline mode //////////////////////////

    function CarPointOffLine(gmap, carId, lat, lon, comment){
        var gmap, carId, lat, lon, comment;
        var currentMarker;
        var points;

        this.gmap = gmap;
        this.carId = carId;
        this.lat = lat;
        this.lon = lon;
        this.comment = comment;
        this.points = null;

        this.addPoint();
    }

    CarPointOffLine.prototype.addPoint = function(){
        var newMarker = new GMarker(new GLatLng(this.lat, this.lon));
        var obj = this;
        GEvent.addListener(newMarker, "click", function() {
            var html = ("<font face='Arial, Helvetica, sans-serif' size ='-1'><b>Comment:</b> "+ obj.comment +"<br/>")
            newMarker.openInfoWindowHtml(html);
        });
        map.addOverlay(newMarker);
        this.currentMarker = newMarker;

    }

    CarPointOffLine.prototype.removePoint = function(){
        if(this.currentMarker != null){
            map.removeOverlay(this.currentMarker);
        }
    }


    //////////////// CarPointsController /////////////////////

    function CarPointsController(gmap){
        var gmap;
        this.gmap = gmap;

        this.start();
    }

    CarPointsController.prototype.start = function(){
        var response = this.checkUpdates();
        var obj = this;
        window.setInterval(function(){
            response = obj.checkUpdates();
        }, refreshPeriod);

    }

    CarPointsController.prototype.checkUpdates = function(){
        var response;
        var options = {
            async: false,
            callback: function(reply) {
                        response = reply;
                      }
        };

        mapController.getAllCarPoints(options);

        if(response != null && response.length > 0){
            if(this.points != null){
                for(var i = 0; i < this.points.length; i++){
                    this.points[i].removePoint();
                }
            }
            this.points = Array(response.length);

            for(var i = 0; i < response.length; i++){
                this.points[i] = new CarPointOffLine(this.gmap, response[i].id, response[i].lat, response[i].lon, response[i].objectname);
            }
        }

        return response;
    }


    function initialize() {
        var map;
        if (GBrowserIsCompatible()) {
             map = new GMap2(document.getElementById("map_canvas"));
             map.setCenter(new GLatLng(55.7522222,37.6155556), 9);
             map.addControl(new GLargeMapControl());
             new GKeyboardHandler(map);
             geocoder = new GClientGeocoder();
        }
        return map;
    }

    function pageLoaded(){
        map = initialize();
        var controller = new CarPointsController(map);

    }

    function pageUnloaded(){
        GUnload();
    }





   </script>
